<!DOCTYPE html>
<html>
<head>
  <title>JavaScript file upload</title>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <!-- <script src="https://wzrd.in/standalone/buffer"></script> -->
  <script src="https://bundle.run/buffer@5.4.0"></script>
  <script src="https://unpkg.com/ipfs-api@9.0.0/dist/index.js"
          integrity="sha384-5bXRcW9kyxxnSMbOoHzraqa7Z0PQWIao+cgeg327zit1hz5LZCEbIMx/LWKPReuB"
          crossorigin="anonymous"></script>
</head>
<script type="text/javascript">
  function upload() {
    const reader = new FileReader();
    reader.onloadend = function() {
      const ipfs = window.IpfsApi('127.0.0.1', 5001) // Connect to IPFS
      const buf = buffer.Buffer(reader.result) // Convert data into buffer
      ipfs.files.add(buf, (err, result) => { // Upload buffer to IPFS
        if(err) {
          console.error(err)
          return
        }
        let url = `http://127.0.0.1:8080/ipfs/${result[0].hash}`
        console.log(`Url --> ${url}`)
        document.getElementById("url").innerHTML= url
        document.getElementById("url").href= url
        document.getElementById("output").src = url
      })
    }
    const photo = document.getElementById("photo");
    reader.readAsArrayBuffer(photo.files[0]); // Read Provided File
  }
</script>
<body>
<form action="/">
  <fieldset>
    <legend>Upload photo</legend>
    <input type="file" name="photo" id="photo">
    <button type="button" onclick="upload()">Upload</button>
    <a href="ipfs.html">fanhui</a>
  </fieldset>
</form>
</br>
</br>
<a id="url"></a>
</br>
</br>
<img id="output">
</body>
</html>